<template>
  <div id="store">
    <div class="storeTop">
      <h3>商品添加</h3>
      <el-button type="primary" class="preservation">保存</el-button>
    </div>

    <div class="productAdd">
      <!-- 商品名称 -->
      <p class="proinps">
        商品名称&emsp;<span class="productName"
          ><el-input placeholder="商品名称" v-model="value" clearable>
          </el-input
        ></span>
      </p>

      <!-- 商品描述 -->
      <p class="proinps">
        商品描述&emsp;
        <el-col :span="6" class="proinps">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </el-col>
      </p>

      <!-- 上传头像 -->
      <p class="proinps">
        商品头像&emsp;<el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
      <!-- 店铺图片 -->
      <p class="proinps">
        店铺图片&emsp;
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </p>

      <!-- 商品描述 -->
      <p class="proinps">
        商品描述&emsp;
        <span class="textarea">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="30"
            show-word-limit
          >
          </el-input>
        </span>
      </p>

      <!-- 配送费 -->
      <p class="proinps">
        配送费&emsp;&emsp;<span class="productName"
          ><el-input placeholder="配送费" v-model="value" clearable> </el-input
        ></span>
      </p>
      <!-- 配送时间 -->
      <p class="proinps">
        配送时间&emsp;<span class="productName"
          ><el-input placeholder="配送时间" v-model="value" clearable>
          </el-input
        ></span>
      </p>
      <!-- 配送描述 -->
      <p class="proinps">
        配送描述&emsp;<span class="productName"
          ><el-input placeholder="配送描述" v-model="value" clearable>
          </el-input
        ></span>
      </p>
      <!-- 店铺评分 -->
      <p class="proinps">
        店铺评分&emsp;<span class="productName"
          ><el-input placeholder="店铺评分" v-model="value" clearable>
          </el-input
        ></span>
      </p>
      <!-- 销量 -->
      <p class="proinps">
        &emsp;&emsp;销量&emsp;<span class="productName"
          ><el-input placeholder="销量" v-model="value" clearable> </el-input
        ></span>
      </p>
      <!-- 添加活动 -->
      <p class="proinps">
        添加活动&emsp;<span class="productName"
          ><el-input placeholder="添加活动" v-model="value" clearable>
          </el-input
        ></span>
        &emsp;&emsp;<el-button type="primary" plain>添加活动</el-button>
      </p>
      <!-- 活动 -->
      <p class="proinps">
        &emsp;&emsp;活动&emsp;
        <el-col :span="6" class="checks">
          <template>
            <el-checkbox label="在线支付满28减5"></el-checkbox>
            <el-checkbox label="VC无线橙果汁全场8折"></el-checkbox>
            <el-checkbox label="单生狗小丑套餐"></el-checkbox>
            <el-checkbox label="过期饮品8折抢购"></el-checkbox>
            <el-checkbox label="单人特选套餐"></el-checkbox>
          </template>
        </el-col>
      </p>
      <!-- 营业时间 -->
      <p class="proinps">
        营业时间&emsp;
        <template>
          <el-time-picker
            is-range
            v-model="value"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </template>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      num: "1",
      textarea: "",
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    // 上传头像-----------
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    // 上传图片
    handleRemove(file) {
      console.log(file, 2);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(1, file);
    },
    // -------------上传头像
  },
};
</script>

<style lang="less" scoped>
.storeTop{
  position: relative;
  .preservation{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
h3 {
  height: 50px;
  display: flex;
  align-items: center;
}
.productAdd {
  padding: 20px;
  width: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  .proinps {
    display: flex;
    align-items: center;
    margin-top: 20px;
    .productName {
      display: flex;
      width: 300px;
    }
    .textarea {
      display: block;
      width: 300px;
    }
  }
  .addPro {
    margin-top: 20px;
    margin-left: 80px;
    width: 100px;
  }
}
// 头像样式-----
.avatar-uploader {
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// -----头像样式
.checks {
  display: flex;
  flex-wrap: wrap;
}
</style>